﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>
<%@ Import Namespace="NerdDinner.Core.Entities"%>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
	Nerd Dinners
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

    <h2>Dinner List</h2>
    
    <p>
    <%=Html.ActionLink("Add Dinner", "Create", "Dinner",null, new{id="createDinner"}) %>
    </p>
    
    <p>
        You are on page <%=ViewData["Page"] %> and your page size is <%=ViewData["PageSize"] %>
    </p>
    
    <%var dinners =(IList<Dinner>) ViewData["Dinners"]; %>
    
    <table id="dinnerlist">
        <thead>
        <tr>
            <th>Name</th>
            <th>Date</th>
            <th></th>
        </tr>
        </thead>
        <tbody>
    <%foreach (var d in dinners)  {%>
        <tr>
        <td> <%=Html.ActionLink(d.Name, "Details", "Dinner", new{id=d.Id, newParam = "someValue"}, null) %></td>
        <td><%=d.Date %></td>
        <td><%=Html.ActionLink("Edit", "Edit", "Dinner", new{id = d.Id}, null) %></td>
        </tr>
        
    <%} %>
    </tbody>
    </table>
<div id="dialog" title="Basic dialog" style="display:none">
	<form action="<%=Url.Action("Create", "Dinner") %>" method="post" id="createForm">	
	    <p>    
	        <label>Dinner Name:</label><br />
	        <%=Html.TextBox("dinnerName") %>
	    </p>
	    
	    <p>
	     <label>Date:</label>
	     <br />	    
	     <%=Html.TextBox("date") %>
	    </p>
	   
	    <input type="submit" value="Create Dinner" />
	</form>
</div>
</asp:Content>

<asp:Content ContentPlaceHolderID="PageScript" runat="server">
<script type="text/javascript" language="Javascript">

    $(document).ready(function() {

        $("#dialog").dialog(
            { 
                autoOpen: false, 
                modal:true,
            });
            
        $("#date").datepicker();

        $("table tr:even").addClass("alt");
        $("table tr:odd").removeClass("alt");

        $("#createForm").submit(function() {

            var name = $("#dinnerName").val();
            var enteredDate = $("#date").val();

            $.post("/Dinner/Create", { name: name, date: enteredDate }, function(data) {

                var dinnerDate = data.Date;                
                
                var newRow = "<tr><td>" + data.Name + "</td>" +
                            "<td>" + prettyDate(dinnerDate) + "</td>" +
                            "<td></td></tr>";

                $(newRow).insertBefore("#dinnerlist > tbody > tr:first");
                
                $("#dialog").dialog("close");

                var name = $("#dinnerName").val("");

                $("table tr:even").addClass("alt");
                $("table tr:odd").removeClass("alt");

            }, 'json');

            return false;
        });

        $("#createDinner").click(function() {

            $("#dialog").dialog('open');
            return false;

        });
    });
    
    function DateDeserialize(dateStr) {
    return eval('new' + dateStr.replace(/\//g, ' '));
    }
</script>
</asp:Content>
